<template>
	<view class="content1">
		<navbar title="优惠券" @goBack="goBack"></navbar>
		<view class="padd24">
			<view class="nav">
				<view class="txt" @click="currents(0)" :class="[!current?'select':'']">可使用
				</view>
				<view class="txt" @click="currents(1)" :class="[current?'select':'']">已失效
				</view>
			</view>
			<view v-for="(e, i) in list" :key="item" class="item">
				<image src="/static/owo/coupon-card-bg.png" class="cuponimg"></image>
				<view class="cupon">
					<view class="lcontent">
						<text class="title">{{ e.name }}</text>
						<text class="ccontent">{{ e.desc }}</text>
						<text class="time">过期时间: {{ convertDateTime(e.end) }}</text>
					</view>
					<view class="rmoney" v-if="e.price>0">
						¥<text class="bigfont">{{ e.price }}</text>
					</view>
					<view class="rmoney" v-else>
						<text class="bigfont">折扣券</text>
					</view>
					<view class="mask" v-if="current === 1">
						{{ e.use_state }}
					</view>
				</view>
			</view>
			<view class="full" v-if="!list.length">
				<image class="nullimg" src="/static/owo/cupon.png"></image>
				<view class="nulllabel">暂无可用优惠券</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/wxcomponents/navbar'
	import {
		listMyCouponlist
	} from "@/api/user"
	export default {
		components: {
			navbar
		},
		data() {
			return {
				show: false,
				current: 0,
				list: [],
				Lists: []
			}
		},
		onShow() {
			this.getcouponlist()
		},
		async onPullDownRefresh() {
			await this.getcouponlist();
			uni.stopPullDownRefresh()
		},
		methods: {
			convertDateTime(iosDate) {
				if (!iosDate) {
					return '-';
				}
				const date = new Date(iosDate);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);
				const seconds = ('0' + date.getSeconds()).slice(-2);

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			createdorder() {
				console.log("22")
				uni.navigateTo({
					url: `/pages/z-meta/paysuccess`
				})
			},
			async getcouponlist() {
				var obj = {
					use_state: this.current ? '已失效' : "可使用"
				}
				const res = await listMyCouponlist(obj)
				const data = res.data || {}
				const items = data.items || []
				this.list = items.filter(item => {
					item.price = (item.price / 100).toFixed(2)
					item.discount = (item.discount / 100).toFixed(2)
					item.rate = (item.rate / 10).toFixed(1)
					// if (item.use_state == '可使用' && this.current == 0) {
					// 	return item
					// } else if (item.use_state == '已失效' && this.current == 1) {
					// 	return item
					// }
					return item
				})
				console.log(this.list)
			},
			currents(current) {
				this.current = current
				this.getcouponlist()
			},
		}
	}
</script>

<style lang="scss">
	@import 'src/static/scss/common';

	.full {
		display: flex;
		height: 600rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.nullimg {
		width: 196rpx;
		height: 92rpx;
		margin-bottom: 20rpx;
	}

	.nulllabel {
		font-size: 28rpx;
		color: #999999;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		// width: 490rpx;
		margin-top: 20rpx;

		.txt {
			display: inline-block;
			width: 132rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			position: relative;
			color: #ffffff;
			font-size: 28rpx;
		}

		.select {
			background-image: url("/static/owo/navselect.png");
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100%;
			color: #FFDD86;
		}
	}

	.padd24 {
		padding: 0 24rpx;
		box-sizing: border-box;
		width: 100%;

	}

	.item {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.cuponimg {
		width: 100%;
		height: 248rpx;
	}

	.cupon {
		position: absolute;
		left: 0;
		top: 0;
		margin-bottom: 20rpx;
		width: 100%;
		height: 248rpx;
		background-position: 0;
		background-size: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 38rpx;
		box-sizing: border-box;
		align-items: center;

	}

	.lcontent {
		display: flex;
		flex-direction: column;
		color: #000;
		justify-content: flex-start;
	}

	.title {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		color: #7A5E15;
	}

	.ccontent {
		font-size: 44rpx;
		color: #7A5E15;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.time {
		font-size: 24rpx;
		color: #7A5E15;
	}

	.rmoney {
		display: flex;
		flex-direction: row;
		font-size: 36rpx;
		align-items: baseline;
		padding-right: 20rpx;
		color: #ffffff;
	}

	.bigfont {
		font-size: 66rpx;
		color: #FDE29B;
	}

	.mask {
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 16rpx;
		background: linear-gradient(90deg, #FDE29B, #FFFFD0);
		width: 100%;
		height: 248rpx;
		z-index: 3;
		text-align: center;
		line-height: 248rpx;
		color: #ffffff;
		font-size: 36rpx;
	}
</style>